<template>
    <div class="flex-column full-width min-width-130 height-68 bg-gray-light5">
      <div class="flex-fill p-30 text-white flex_between_start">
        <div class="d-flex">
          <ul class="smr-30" v-for="item in state.navigation" :key="item.id">
          <p class="width-4 text-20">{{item.name}}</p>
          <p class="width-4 text-30">.</p>
          <li
            class="text-14 mt-3 width-10 text-gray-light6 cursor-pointer"
            v-for="(sub, index) in item.subNavigation"
            :key="index"
            @click="handleJump(sub.forward, sub.name, sub.id, item)"
            >{{sub.name}}</li>
        </ul>
        </div>
        <div>
          <img  class="width-5 height-5 ml-2 cursor-pointer" v-for="(img, index) in mediaList" :key="index" :src="img" alt="">
        </div>
      </div>
      <div class="full-width min-width-130 height-8 line-height-80 bg-black-light2 px-30 text-12 text-gray-light6">
        CopyRight ©2018-2022 Sichuan Kupo Technology Group All Rights Reserved | 蜀ICP备20002318号-1
      </div>
    </div>
</template>

<script setup>
import { onMounted, watch, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { mediaList } from '@/static/home.js'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import urls from '@/api/index'

const router = useRouter()
const state = reactive({
  navigation: []
})
watch(() => userStore.state.lang, () => {
  getMenuList()
})
const getMenuList = () => {
  urls.home.getMenuList(userStore.state.lang)
    .then((res) => {
      state.navigation = res.data.navigations
    })
    .catch((err) => {
      ElMessage.error(err.msg)
    })
}
const handleJump = (path, name, id, parent) => {
  router.push({
    path,
    query: {
      id
    }
  })
  switch (parent.id) {
    case '62c6c6016887a75deb0b5001':
      userStore.commit('ADDBREADCRUMB', [{ path: '/introduce', name: 'message.ABOUT_KUPO', query: { id: '62d6bf34e1d8375b113f70a3' } }, { path, name, query: { id } }])
      break
    case '62c6c6016887a75deb0b5002':
      userStore.commit('ADDBREADCRUMB', [{ path: '/finance', name: 'message.FINANCE', query: { id: '62d6c0bbe1d8375ba8ffe0b7' } }, { path, name, query: { id } }])
      break
    case '62c6c6016887a75deb0b5003':
      userStore.commit('ADDBREADCRUMB', [{ path: '/news', name: 'message.MEDIA_SOURCE', query: { id: '62d6bfcbe1d8375b113f70a9' } }, { path, name, query: { id } }])
      break
    case '62c6c6016887a75deb0b5004':
      userStore.commit('ADDBREADCRUMB', [{ path: '/concatDetail', name: 'message.CONCACT', query: { id: '62d6c005e1d8375b113f70ab' } }, { path, name, query: { id } }])
      break
    default:
      break
  }
}
onMounted(() => {
  getMenuList()
})
</script>

<style lang="scss" scoped>
li:hover{
  color: #ff5a2d;
}
</style>
